<template>

	<scroll-view class="conversations" scroll-y="true">
		<view v-if="duixinlist.length > 0">
		  <view class="scroll-item" v-for="(conversation, key) in duixinlist" :key="key">
					<view class="item-head d-yuanjiao-50">
						<image :src="conversation.data.avatar" class="head-icon d-yuanjiao-50"></image>
						<view class="item-head_unread" v-if="conversation.unread">{{ conversation.unread }}</view>
					</view>
		  	<view class="scroll-item_info" @click="chat(conversation)">
						<view class="item-info-top">
						  <text class="item-info-top_name">{{ conversation.data.name }}</text>
						  <view class="item-info-top_time">{{ formatDate(conversation.lastMessage.timestamp) }}</view>
						</view>
						<view class="item-info-bottom">
							<view class="item-info-bottom-item">
								<view class="item-info-top_content" v-if="!conversation.lastMessage.recalled">
									  <text class="unread-text">
										{{ conversation.lastMessage.read === false && conversation.lastMessage.senderId === faxinuid.id ? '[未读]' : '' }}
									  </text>
									
									  <text v-if="conversation.lastMessage.senderId === faxinuid.id">我: </text>
									  <text v-else>{{ conversation.type === 'group' ? conversation.lastMessage.senderData.name : conversation.data.name }}: </text>
									  <text v-if="conversation.lastMessage.type === 'text'">{{ conversation.lastMessage.payload.text }}</text>
									  <text v-else-if="conversation.lastMessage.type === 'video'">[视频消息]</text>
									  <text v-else-if="conversation.lastMessage.type === 'audio'">[语音消息]</text>
									  <text v-else-if="conversation.lastMessage.type === 'image'">[图片消息]</text>
									  <text v-else-if="conversation.lastMessage.type === 'file'">[文件消息]</text>
									  <text v-else-if="conversation.lastMessage.type === 'order'">[自定义消息:订单]</text>
									  <text v-else>[[未识别内容]]</text>
								</view>
								<view class="item-info-top_content" v-else>
								  <text>
									{{conversation.lastMessage.recaller.id === faxinuid.id ? '你' : conversation.lastMessage.recaller.data.name}}撤回了一条消息
								  </text>
								</view>
								<view class="item-info-bottom_action" @click.stop="showAction(conversation)"></view>
							</view>
						</view>
		  	</view>
		  </view>
		</view>
		<view class="no-conversation" v-else>当前没有会话</view>
		<view class="action-container" v-if="actionPopup.visible">
		  <view class="layer" @click="actionPopup.visible = false"></view>
		  <view class="action-box">
		    <view class="action-item" @click="topConversation">
		      {{ actionPopup.conversation.top ? '取消置顶' : '置顶聊天' }}
		    </view>
		    <view class="action-item" @click="deleteConversation">删除聊天</view>
		  </view>
		</view>
	  <view v-if="conversations.length > 0">
	    <view class="scroll-item" v-for="(conversation, key) in conversations" :key="key">
			<view class="item-head d-yuanjiao-50">
				<image :src="conversation.data.avatar" class="head-icon d-yuanjiao-50"></image>
				<view class="item-head_unread" v-if="conversation.unread">{{ conversation.unread }}</view>
			</view>
	    	<view class="scroll-item_info" @click="chat(conversation)">
				<view class="item-info-top">
				  <text class="item-info-top_name">{{ conversation.data.name }}</text>
				  <view class="item-info-top_time">{{ formatDate(conversation.lastMessage.timestamp) }}</view>
				</view>
				<view class="item-info-bottom">
					<view class="item-info-bottom-item">
						<view class="item-info-top_content" v-if="!conversation.lastMessage.recalled">
							  <text class="unread-text">
								{{ conversation.lastMessage.read === false && conversation.lastMessage.senderId === faxinuid.id ? '[未读]' : '' }}
							  </text>
							
							  <text v-if="conversation.lastMessage.senderId === faxinuid.id">我: </text>
							  <text v-else>{{ conversation.type === 'group' ? conversation.lastMessage.senderData.name : conversation.data.name }}: </text>
							  <text v-if="conversation.lastMessage.type === 'text'">{{ conversation.lastMessage.payload.text }}</text>
							  <text v-else-if="conversation.lastMessage.type === 'video'">[视频消息]</text>
							  <text v-else-if="conversation.lastMessage.type === 'audio'">[语音消息]</text>
							  <text v-else-if="conversation.lastMessage.type === 'image'">[图片消息]</text>
							  <text v-else-if="conversation.lastMessage.type === 'file'">[文件消息]</text>
							  <text v-else-if="conversation.lastMessage.type === 'order'">[自定义消息:订单]</text>
							  <text v-else>[[未识别内容]]</text>
						</view>
						<view class="item-info-top_content" v-else>
						  <text>
							{{conversation.lastMessage.recaller.id === faxinuid.id ? '你' : conversation.lastMessage.recaller.data.name}}撤回了一条消息
						  </text>
						</view>
						<view class="item-info-bottom_action" @click.stop="showAction(conversation)"></view>
					</view>
				</view>
	    	</view>
	    </view>
	  </view>
	  <view class="no-conversation" v-else>当前没有会话</view>
	  <view class="action-container" v-if="actionPopup.visible">
	    <view class="layer" @click="actionPopup.visible = false"></view>
	    <view class="action-box">
	      <view class="action-item" @click="topConversation">
	        {{ actionPopup.conversation.top ? '取消置顶' : '置顶聊天' }}
	      </view>
	      <view class="action-item" @click="deleteConversation">删除聊天</view>
	    </view>
	  </view>
	</scroll-view>

</template>

<script>
import toubu from "@/components/toubu/toubu";  //引入头部组件
import EmojiDecoder from '../../utils/EmojiDecoder';
import config from "../../utils/config";
import {formatDate} from '../../utils/utilsim';
var Api = require("../../utils/api.js");
var util = require("../../utils/util.js");

var wxApi = require("../../utils/wxApi.js");
var wxRequest = require("../../utils/wxRequest.js");
var webSiteName = config.getWebsiteName;
var domain = config.getDomain;

export default {
	name: 'duanxin',
	
  data() {
	  const emojiUrl = config.getDomain+'/static/assets/comment/emotions/';
	  const emojiMap = {
		  '[傲慢]': 'aoman.gif',
		  '[白眼]': 'baiyan.gif',
		  '[鄙视]': 'bishi.gif',
		  '[呲牙]': 'ciya.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
		  '[得以]': 'deyi.gif',
	  };
    return {
		//聊天文本框
		text: '',
		friend: null,
		to: {},// 作为createMessage的参数
		currentUser: null,
      
      categoriesList: {},
      floatDisplay: "none",
      // userInfo: [],
      webSiteName: webSiteName,
      domain: domain,
	  www: [],
	  guid:'',
	  gerenxinxi: [],
	  conversations: [],
	  unreadTotal: 0,
	  // 消息选择
	  messageSelector: {
	    visible: false,
	    messages: []
	  },
	  to: {},

	  //定义表情列表
	  emoji: {
	    url: emojiUrl,
	    map: emojiMap,
	    visible: false,
	    decoder: new EmojiDecoder(emojiUrl, emojiMap),
	  },
	  //是否展示‘其他消息类型面板’
	  otherTypesMessagePanelVisible: false,
	  orderList: {
	    orders: [],
	    visible: false
	  },
	  // 展示消息删除弹出框
	  actionPopup: {
	    visible: false,
	    message: null,
	    recallable: false,
	  },
	  shouxinuid:'', //收信人
	  faxinuid:'' ,//发信人
	  faxingerenxinxi:[],
	  uid:'',
	  keycode:'',
	  duixinlist:''
	  
    };
  },

  components: {
	  toubu,
  },
  props: {},
  onLoad: function (options) {
	var duixin = this;
	duixin.getWww();
	
	uni.setNavigationBarTitle({
	  title: '消息'
	});
	
	
	duixin.guid = options.uid;
	duixin.faxinuid = options.faxinuid;
	duixin.shouxinuid = options.uid;
	
	console.log("duixin.faxinuid",duixin.faxinuid);
	var userInfo = uni.getStorageSync('userInfo');
	var keycode = uni.getStorageSync('keycode');
	duixin.keycode = keycode;
	//self.userInfo = userInfo;
	//console.log("userInfo1",userInfo);
	if (userInfo) {
		var member = uni.getStorageSync('member');
		var uid = uni.getStorageSync('memberuid');
		duixin.uid = uid;
		duixin.getDuixinlistdata();
	} else {
		//否则跳转到登录页面
		uni.reLaunch({ url: '/pages/login/login'}) // 跳转到首页
	}
	
	duixin.getFaxinGerenxinxi();
	duixin.getGerenxinxi();
	duixin.initialGoEasyListeners();
	//console.log("duixin.",duixin.faxingerenxinxi);
	//聊天对象
	/*let id = options.uid;
	let faxinuid = duixin.faxinuid;
	this.currentUser = getApp().globalData.currentUser;
	this.to = {
	  id: faxinuid,
	  type: 'private',
	  data: {
	    name: this.friend.name,
	    avatar: this.friend.avatar
	  }
	};*/
	
	
	//console.log("gerenxinxi.",duixin.gerenxinxi) //连接成功
  },
  onShow: function () {
	  var duixin = this;
	  console.log("duixin.GoEasy",duixin.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED);
	  duixin.goEasy.im.on(duixin.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, duixin.renderConversations); //监听会话列表变化
	  duixin.loadConversations(); //加载会话列表
  },
  onShareAppMessage: function () {
    return {
      title: '分享“' + config.getWebsiteName + '”消息.',
      path: 'pages/quan/wode',
      success: function (res) {// 转发成功
      },
      fail: function (res) {// 转发失败
      }
    };
  },
  beforeDestroy() {
	  var duixin = this;
    duixin.goEasy.im.off(duixin.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, duixin.renderConversations);
  },
  methods: {
	  formatDate,

	//渲染文本消息，如果包含表情，替换为图片
	//todo:本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
	renderTextMessage(message) {
	  return '<span class="text-content">' + this.emoji.decoder.decode(message.payload.text) + '</span>'
	},
	//像微信那样显示时间，如果有几分钟没发消息了，才显示时间
	//todo:本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
	renderMessageDate(message, index) {
		var duixin = this;
		//console.log('message',message); 
	  if (index === 0) {
	    return formatDate(message['timestamp'])
	  } else {
	    if (message['timestamp'] - duixin.history.messages[index -1]['timestamp'] > 5 * 60 * 1000) {
	      return formatDate(message['timestamp'])
	    }
	  }
	  return '';
	},
	//获取站点
	getWww() {
	  	var self = this;
	  	self.setData({
	  	  www: []
	  	});
	  	var getTubiaoRequest = wxRequest.getRequest(Api.getWwwUrl());
	  	getTubiaoRequest.then(response => {
	  		if (response.data.code == 1) {
	  		  //console.log(response.data.data); 
	  		  self.www = response.data.data
	  		} else {
	  		  self.setData({
	  			displaySwiper: "none"
	  		  });
	  		}
	  	});
	},

	// 点击
	quanzi(tieid) {
		console.log('点击',tieid); 
		var url = '../quan/quanzi?&id='+tieid;
		uni.navigateTo({
			url: url
		});
	},
	//建立mi用户链接
	getUidlianjie(data) {
		var duixin = this;
		var uid = duixin.faxinuid;
		var faxinuiddata = data;
		console.log("连接成功faxinuiddata",faxinuiddata) //连接成功
		duixin.goEasy.connect({
			id: faxinuiddata.id, //im必填，最大长度60字符
			data: {
			  name: faxinuiddata.name,
			  avatar: faxinuiddata.avatar
			},
			onSuccess: function () { //连接成功
			console.log("连接成功111") //连接成功
			},
			onFailed: function (error) { //连接失败
			console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
			},
			onProgress: (attempts) => {
			console.log('GoEasy is connecting', attempts);
			}
		});
	},
	initialGoEasyListeners() {
	  // 监听私聊消息
	  this.goEasy.im.on(this.GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onMessageReceived);
	  //监听消息删除
	  this.goEasy.im.on(this.GoEasy.IM_EVENT.MESSAGE_DELETED, this.onMessageDeleted);
	},
	onMessageReceived (message) {
		var duixin = this;
		var faxinuid = duixin.faxinuid;
		var shouxinuid = duixin.shouxinuid;
	  let senderId = message.senderId;
	  let receiverId = message.receiverId;
	  let friendId = faxinuid === senderId ? receiverId : senderId;
	  if (friendId === shouxinuid) {
	    this.history.messages.push(message);
	    //聊天时，收到消息标记为已读
	    this.markPrivateMessageAsRead();
	    //收到新消息，是滚动到最底部
	    this.scrollToBottom();
	  }
	},
	onMessageDeleted (deletedMessages) {
		var duixin = this;
		var faxinuid = duixin.faxinuid;
		var shouxinuid = duixin.shouxinuid;
	  deletedMessages.forEach(message => {
	    let senderId = message.senderId;
	    let receiverId = message.receiverId;
	    let friendId = faxinuid === senderId ? receiverId : senderId;
	    if (friendId === shouxinuid) {
	      let index = this.history.messages.indexOf(message);
	      if (index > -1) {
	        this.history.messages.splice(index, 1);
	      }
	    }
	  });
	},
	//收信个人信息
	getGerenxinxi() {
		var duixin = this;
		duixin.setData({
		  gerenxinxi: []
		});
		var uid = duixin.shouxinuid;
		var getYonghuXinxiRequest = wxRequest.getRequest(Api.getYonghuXinxi(uid));
		getYonghuXinxiRequest.then(response => {
			if (response.data.code == 1) {
			  //console.log("111",response.data.data); 
			  duixin.gerenxinxi = response.data.data
			  //duixin.getUidlianjie(duixin.gerenxinxi);
			} else {
			  duixin.setData({
				displaySwiper: "none"
			  });
			}
		});
	},
	//发信个人信息
	getFaxinGerenxinxi() {
		var duixin = this;
		
		var uid = duixin.faxinuid;
		var getYonghuXinxiRequest = wxRequest.getRequest(Api.getYonghuXinxi(uid));
		getYonghuXinxiRequest.then(response => {
			if (response.data.code == 1) {
			  //console.log("111",response.data.data); 
			  duixin.faxingerenxinxi = response.data.data
			  duixin.getUidlianjie(duixin.faxingerenxinxi);

			  //duixin.getUidlianjie(duixin.faxingerenxinxi);
			  console.log("faxingerenxinxi",duixin.faxingerenxinxi); 
			} else {
			  duixin.setData({
				//displaySwiper: "none"
			  });
			}
		});
	},
	//发文字
	sendTextMessage() {
		
		var duixin = this;
		var faxinuid = duixin.faxinuid;
		var shouxinuid = duixin.shouxinuid;
		var faxinuiddata = duixin.faxingerenxinxi;
		var gerenxinxidata = duixin.gerenxinxi;
	  if (this.text.trim() !== '') {
	    let body = this.text;
	    if (this.text.length >= 50) {
	      body = this.text.substring(0, 30) + '...';
	    }
		//console.log("faxinuid",faxinuid); 
		console.log("duixin.faxingerenxinxi000000",duixin.faxingerenxinxi); 
		
	    this.goEasy.im.createTextMessage({
			senderId: faxinuid,
			senderData: {"avatar": faxinuiddata.avatar, "nickname": faxinuiddata.name},
			text: this.text,
			to: {
			type: 'private',   //私聊还是群聊this.goEasy.IM_SCENE.PRIVATE，群聊为GoEasy.IM_SCENE.GROUP
			id: shouxinuid, //接收方用户id
			data: {"avatar": gerenxinxidata.avatar, "nickname": gerenxinxidata.name} //接收方用户扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data
			},
			notification: {
			title: this.text + '发来一段文字',
			body: body,
			sound: 'message',
			badge: '+1'
			},
			onSuccess: (message) => {
				console.log('发送成功', message);
			    duixin.sendMessage(message);
				//duixin.history.messages.push(message);
				
			},
			onFailed: (e) => {
			console.log('error11 :', e);
			}
	    });
	  }
	  this.text = '';
	},
	
	scrollToBottom() {
	  this.$nextTick(() => {
	    uni.pageScrollTo({
	      scrollTop: 2000000,
	      duration: 0
	    });
	  });
	},
	
	
	//表情
	switchEmojiKeyboard() {
	  this.emoji.visible = !this.emoji.visible;
	  this.otherTypesMessagePanelVisible = false;
	},
	chooseEmoji(emojiKey) {
	  this.text += emojiKey;
	},
	//附加
	showOtherTypesMessagePanel() {
	  this.otherTypesMessagePanelVisible = !this.otherTypesMessagePanelVisible;
	  this.emoji.visible = false;
	},
	//撤回
	showActionPopup(message) {
	  const MAX_RECALLABLE_TIME = 3 * 60 * 1000; //3分钟以内的消息才可以撤回
	  this.messageSelector.messages = [message];
	  if ((Date.now() - message.timestamp) < MAX_RECALLABLE_TIME && message.senderId === this.faxinuid && message.status === 'success') {
	    this.actionPopup.recallable = true;
	  } else {
	    this.actionPopup.recallable = false;
	  }
	  this.actionPopup.visible = true;
	},
	markPrivateMessageAsRead() {
	  this.goEasy.im.markMessageAsRead({
	    id: this.shouxinuid,
	    type: 'this.to.type',
	    onSuccess: function () {
	      console.log('标记私聊已读成功');
	    },
	    onFailed: function (error) {
	      console.log("标记私聊已读失败", error);
	    }
	  });
	},
	showImageFullScreen(e) {
	  let imagesUrl = [e.currentTarget.dataset.url];
	  uni.previewImage({
	    urls: imagesUrl
	  });
	},
	//语音录制按钮和键盘输入的切换
	switchAudioKeyboard() {
	  this.audio.visible = !this.audio.visible;
	  if (uni.authorize) {
	    uni.authorize({
	      scope: 'scope.record',
	      fail: () => {
	        uni.showModal({
	          title: '获取录音权限失败',
	          content: '请先授权才能发送语音消息！'
	        });
	      }
	    });
	  }
	},
	onRecordStart() {
	  try {
	    // 更多配置参考uniapp：https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager
	    recorderManager.start({
	      duration: 600000 // 指定录音的时长,单位 ms
	    });
	  } catch (e) {
	    uni.showModal({
	      title: '录音错误',
	      content: '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
	    });
	  }
	},
	onRecordEnd() {
	  try {
	    recorderManager.stop();
	  } catch (e) {
	    console.log(e);
	  }
	},
	// 加载最新的会话列表
	loadConversations() {
		var duixin = this;
		//console.log('会话11111');
		duixin.goEasy.im.latestConversations({
		  onSuccess: (result) => {
			//console.log('会话00000',result);
		    uni.hideLoading();
		    let content = result.content;
		    duixin.renderConversations(content);
		    let unreadTotal = content.unreadTotal;
		    if(unreadTotal > 0) {
		      uni.setTabBarBadge({
		        index: 0,
		        text: unreadTotal.toString()
		      });
		    }else{
		      uni.removeTabBarBadge({index: 0});
		    }
		  },
		  onFailed: (error) => {
		    uni.hideLoading();
		    console.log('获取最新会话列表失败, error:', error);
		  }
		});
	  
	},
	renderConversations(content) {
		var duixin = this;
	  duixin.conversations = content.conversations;
	  console.log('最新会话conversations:', duixin.conversations);
	},
	deleteSingleMessage() {
	  uni.showModal({
	    content: '确认删除？',
	    success: (res) => {
	      this.actionPopup.visible = false;
	      if (res.confirm) {
	        this.deleteMessage();
	      }
	    },
	  })
	},
	showCheckBox() {
	  this.messageSelector.messages = [];
	  this.messageSelector.visible = true;
	  this.actionPopup.visible = false;
	},
	hideActionPopup () {
	  this.actionPopup.visible = false;
	  this.actionPopup.message = null;
	},
	deleteMultipleMessages() {
	  if (this.messageSelector.messages.length > 0) {
	    uni.showModal({
	      content: '确认删除？',
	      success: (res) => {
	        this.messageSelector.visible = false;
	        if (res.confirm) {
	          this.deleteMessage();
	        }
	      },
	    })
	  }
	},
	selectMessages(e) {
	  const selectedMessageIds = e.detail.value;
	  let selectedMessages = [];
	  this.history.messages.forEach(message => {
	    if (selectedMessageIds.includes(message.messageId)) {
	      selectedMessages.push(message);
	    }
	  })
	  this.messageSelector.messages = selectedMessages;
	},
	deleteMessage() {
	  this.goEasy.im.deleteMessage({
	    messages: this.messageSelector.messages,
	    onSuccess: (result) => {
	      this.messageSelector.messages.forEach(message => {
	        let index = this.history.messages.indexOf(message);
	        if (index > -1) {
	          this.history.messages.splice(index, 1);
	        }
	      });
	      this.messageSelector.messages = [];
	    },
	    onFailed: (error) => {
	      console.log('error:', error);
	    }
	  });
	},
	recallMessage() {
	  this.actionPopup.visible = false;
	  this.goEasy.im.recallMessage({
	    messages: this.messageSelector.messages,
	    onSuccess: () => {
	      console.log('撤回成功');
	    },
	    onFailed: (error) => {
	      console.log('撤回失败,error:', error);
	    }
	  });
	},
	chat(conversation) {
		var duixin = this;
		var faxinuid = duixin.faxinuid;
		//var shouxinuid = duixin.shouxinuid;
	  let path = conversation.type === this.GoEasy.IM_SCENE.PRIVATE
	    ? '/pages/xiaoxi/duixin?uid='+conversation.userId+'&faxinuid=' + faxinuid
	    : './groupChat?to=' + conversation.groupId;
		console.log('url: ', path);
		uni.navigateTo({ 
			url: path
		});
	},
	showAction(conversation) {
	  this.actionPopup.conversation = conversation;
	  this.actionPopup.visible = true;
	},
	//列表
	getDuixinlistdata(){
		var duixin = this;
		var getDuixinlistRequest = wxRequest.getRequest(Api.getDuixinlist(duixin.uid,duixin.keycode));
		var res;
		getDuixinlistRequest.then(response => {
			res = response;
			if(res.data.code) {
				duixin.duixinlist = res.data.data;
			} else {
				uni.showToast({
					icon: 'none',
					title: '获取失败，请稍后重试'
				});
			}
		})
	}
  }
};
</script>
<style>

.text-content {
    padding: 16rpx;
    border-radius: 12rpx;
    color: #000000;
    background: #FFFFFF;
    word-break: break-all;
    text-align: left;
    vertical-align: center;
    display: block;
}
.action-bottom image {
    width: 70rpx;
    height: 70rpx;
}
  page {
    height: 100%;
  }

  .conversations {
    width: 750rpx;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
  }

  .conversations .scroll-item {
    height: 152rpx;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
  }

  .conversations .scroll-item .head-icon {
    width: 100rpx;
    height: 100rpx;
    margin-right: 28rpx;
  }

  .conversations .scroll-item_info {
    height: 151rpx;
    width: 590rpx;
    padding-right: 32rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #EFEFEF;
  }

  .conversations .scroll-item_info .item-info-top {
    padding-top: 20rpx;
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }

  .conversations .item-info-top_name {
    font-size: 34rpx;
    color: #262628;
  }

  .conversations .item-info-top_time {
    font-size: 34rpx;
    color: rgba(179, 179, 179, 0.8);
    font-family: Source Han Sans CN;
  }

  .conversations .item-info-bottom {
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
  }

  .conversations .item-info-bottom-item {
    display: flex;
    justify-content: space-between;
  }

  .item-info-bottom .item-info-top_content {
    font-size: 34rpx;
    color: #b3b3b3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .item-info-bottom .item-info-bottom_action {
    width: 50rpx;
    height: 50rpx;
    font-size: 34rpx;
    background: url("@/static/im/action.png") no-repeat center;
    background-size: 28rpx 30rpx;
  }

  .no-conversation {
    width: 100%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    color: #9D9D9D;
  }

  .item-head {
    position: relative;
  }

  .item-head .item-head_unread {
    padding: 6rpx;
    background-color: #EE593C;
    color: #FFFFFF;
    font-size: 34rpx;
    line-height: 28rpx;
    border-radius: 24rpx;
    min-width: 24rpx;
    min-height: 24rpx;
    text-align: center;
    position: absolute;
    top: 0;
    right: 15rpx;
  }

  .action-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .action-container .layer {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(51, 51, 51, 0.5);
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  .action-box {
    width: 400rpx;
    height: 240rpx;
    background: #ffffff;
    position: relative;
    z-index: 100;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .action-item {
    text-align: center;
    line-height: 120rpx;
    font-size: 34rpx;
    color: #262628;
    border-bottom: 1px solid #EFEFEF;
  }

  .unread-text {
    color: #d02129;
  }
</style>